<template>
  <div class="edit-table-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>编辑表信息</span>
          <div>
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </div>
        </div>
              </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-form :model="form" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="表名称">
                  <el-input v-model="form.tableName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="表描述">
                  <el-input v-model="form.tableComment" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实体类名">
                  <el-input v-model="form.className" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="作者">
                  <el-input v-model="form.functionAuthor" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="包路径">
                  <el-input v-model="form.packageName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="模块名">
                  <el-input v-model="form.moduleName" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="字段信息" name="columns">
          <el-table :data="columnsData" border>
            <el-table-column prop="columnName" label="字段名" />
            <el-table-column prop="columnComment" label="字段描述" />
            <el-table-column prop="columnType" label="字段类型" />
            <el-table-column prop="javaType" label="Java类型" />
            <el-table-column prop="javaField" label="Java属性" />
            <el-table-column label="是否必填">
              <template #default="{ row }">
                <el-switch v-model="row.required" />
              </template>
            </el-table-column>
            <el-table-column label="是否为插入字段">
              <template #default="{ row }">
                <el-switch v-model="row.isInsert" />
              </template>
            </el-table-column>
            <el-table-column label="是否为编辑字段">
              <template #default="{ row }">
                <el-switch v-model="row.isEdit" />
              </template>
            </el-table-column>
            <el-table-column label="是否在列表显示">
              <template #default="{ row }">
                <el-switch v-model="row.isList" />
              </template>
            </el-table-column>
            <el-table-column label="是否查询字段">
              <template #default="{ row }">
                <el-switch v-model="row.isQuery" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="生成信息" name="genInfo">
          <el-form :model="form" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="生成模板">
                  <el-select v-model="form.tplCategory" placeholder="请选择模板">
                    <el-option label="单表" value="crud" />
                    <el-option label="树表" value="tree" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成包路径">
                  <el-input v-model="form.packageName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成模块名">
                  <el-input v-model="form.moduleName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成业务名">
                  <el-input v-model="form.businessName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成功能名">
                  <el-input v-model="form.functionName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成作者">
                  <el-input v-model="form.functionAuthor" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
      </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'EditTable',
});

const route = useRoute();
const router = useRouter();

const activeTab = ref('basic');
const tableId = ref(route.params.tableId as string);

const form = ref({
  tableName: '',
  tableComment: '',
  className: '',
  functionAuthor: '',
  packageName: '',
  moduleName: '',
  businessName: '',
  functionName: '',
  tplCategory: 'crud',
});

const columnsData = ref([
  {
    columnName: 'id',
    columnComment: '主键ID',
    columnType: 'bigint',
    javaType: 'Long',
    javaField: 'id',
    required: true,
    isInsert: false,
    isEdit: false,
    isList: true,
    isQuery: false,
  },
  {
    columnName: 'name',
    columnComment: '名称',
    columnType: 'varchar(100)',
    javaType: 'String',
    javaField: 'name',
    required: true,
    isInsert: true,
    isEdit: true,
    isList: true,
    isQuery: true,
  },
  {
    columnName: 'create_time',
    columnComment: '创建时间',
    columnType: 'datetime',
    javaType: 'Date',
    javaField: 'createTime',
    required: false,
    isInsert: true,
    isEdit: false,
    isList: true,
    isQuery: false,
  },
]);

function goBack() {
  router.go(-1);
}

function handleSave() {
  ElMessage.success('保存成功');
  goBack();
}

onMounted(() => {
  // 根据 tableId 加载表信息
  console.log('编辑表ID:', tableId.value);
});
</script>

<style scoped>
.edit-table-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>